<template>
	<view class="container">
		<nav-bar :title="title"></nav-bar>
		<view class="search-box">
			<view class="search-before-box" v-show="!isInput" @tap="showInput">
				<view class="search-content-box">
					<view class="search-icon">
						<image src="../../static/images/search.png"></image>
					</view>
					<view class="search-label">搜索</view>
				</view>
			</view>
			<view class="search-after-box" v-show="isInput">
				<input @input="search" v-model="keyword" :focus="isFocus" @blur="hideInput" />
			</view>
		</view>
		<view class="list-box">
			<view class="list-item" v-for="(item,index) in dataList" :key="index">
				<view class="item-select">
					<view @tap="selectMember(index)" class="select-box" v-if="item.type == 1">
						<image v-show="!item.isSelected" src="../../static/images/pay_select_no.png"></image>
						<image v-show="item.isSelected" src="../../static/images/pay_select_yes.png"></image>
					</view>
				</view>
				<view class="item-info">
					<view class="info-avatar">
						<image :src="item.avatar"></image>
					</view>
					<view class="info-name">{{item.name}}</view>
				</view>
			</view>
		</view>
		<view class="submit-box">
			<view class="submit-info">
				<view class="submit-num">已选择({{selectedNum}})</view>
				<view class="submit-btn" @tap="showMask">移除</view>
			</view>
		</view>
		<view class="mask" v-show="isShowMask"></view>
		<view class="mask-box" v-show="isShowMask">
			<view class="mask-content-box">
				<view class="mask-content-title">确定要将选择的成员从本群移除？</view>
				<view class="mask-btn-box">
					<view class="mask-btn btn-cancel" @tap="hideMask">取消</view>
					<view class="mask-btn" @tap="delMember">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import NavBar from '../../components/nav_bar.vue'
	import { http, showToastMsg } from '../../utils'
	
	export default {
		components: {
			NavBar
		},
		
		data() {
			return {
				title: '删除群成员',
				isInput: false,
				isFocus: false,
				keyword: '',
				dataList: [],
				dataAllList: [
					{id: 1, type: 2, isSelected: false, name: '周老师', avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F9702170888%2F1000.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613293723&t=0aa113c82f1339e464ce2c4234989814'},
					{id: 2, type: 2, isSelected: false, name: '郭老师', avatar: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=221521724,481371925&fm=26&gp=0.jpg'},
					{id: 3, type: 1, isSelected: false, name: '黎昕', avatar: 'https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/w=580/sign=2ac4499efdfaaf5184e381b7bc5594ed/e3fb8c64034f78f013e97b4b79310a55b2191cba.jpg'},
					{id: 4, type: 1, isSelected: false, name: '往事难...', avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201810%2F24%2F20181024133921_wlvbo.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613212016&t=a7697b8a674aafb037fa4ebd35ddb2eb'},
					{id: 5, type: 1, isSelected: false, name: '黎昕', avatar: 'https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/w=580/sign=2ac4499efdfaaf5184e381b7bc5594ed/e3fb8c64034f78f013e97b4b79310a55b2191cba.jpg'},
					{id: 6, type: 1, isSelected: false, name: '往事难...', avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201810%2F24%2F20181024133921_wlvbo.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613212016&t=a7697b8a674aafb037fa4ebd35ddb2eb'},
					{id: 7, type: 1, isSelected: false, name: '黎昕', avatar: 'https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/w=580/sign=2ac4499efdfaaf5184e381b7bc5594ed/e3fb8c64034f78f013e97b4b79310a55b2191cba.jpg'},
					{id: 8, type: 1, isSelected: false, name: '往事难...', avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201810%2F24%2F20181024133921_wlvbo.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613212016&t=a7697b8a674aafb037fa4ebd35ddb2eb'},
					{id: 9, type: 1, isSelected: false, name: '往事难...', avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201810%2F24%2F20181024133921_wlvbo.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613212016&t=a7697b8a674aafb037fa4ebd35ddb2eb'},
					{id: 10, type: 1, isSelected: false, name: '黎昕', avatar: 'https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/w=580/sign=2ac4499efdfaaf5184e381b7bc5594ed/e3fb8c64034f78f013e97b4b79310a55b2191cba.jpg'},
					{id: 11, type: 1, isSelected: false, name: '往事难...', avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201810%2F24%2F20181024133921_wlvbo.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613212016&t=a7697b8a674aafb037fa4ebd35ddb2eb'},
				],
				selectedList: new Set(),
				selectedNum: 0,
				isShowMask: false
			}
		},
		
		onLoad() {
			this.dataList = this.dataAllList
		},
		
		methods: {
			
			showMask(id, index) {
				this.isShowMask = true
			},
			
			hideMask() {
				this.isShowMask = false
			},
			
			showInput() {
				this.isInput = true
				this.isFocus = true
			},
			
			hideInput() {
				this.isInput = false
				this.isFocus = false
			},
			
			search() {
				const that = this
				that.dataList = that.dataAllList.filter(item => {
					return item.name.includes(that.keyword)
				})
			},
			
			selectMember(index) {
				let isSelected = !this.dataList[index].isSelected
				if (isSelected) {
					this.selectedList.add(this.dataList[index].id)
				} else {
					this.selectedList.delete(this.dataList[index].id)
				}
				this.dataList[index].isSelected = isSelected
				this.selectedNum = this.selectedList.size
			},
			
			delMember() {
				const that = this
				if (that.selectedList.size <= 0) {
					return showToastMsg('请至少选择一个群成员')
				}
				that.selectedList.forEach(id => {
					for (let i = 0; i < that.dataAllList.length; i++) {
						if (that.dataAllList[i].id == id) {
							that.dataAllList.splice(i, 1)
						}
					}
				})
				that.selectedList.clear()
				that.selectedNum = 0
				that.hideMask()
			}
			
		}
	}
</script>

<style>
	.container {
		width: 750rpx;
	}
	
	.search-box {
		width: 750rpx;
		height: 80rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.search-before-box {
		width: 700rpx;
		height: 64rpx;
		background-color: #f4f4f4;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-radius: 32rpx;
	}
	
	.search-content-box {
		width: 104rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	
	.search-icon {
		margin-top: 4rpx;
	}
	
	.search-icon image {
		width: 32rpx;
		height: 32rpx;
	}
	
	.search-label {
		color: #bcbcbc;
		font-size: 24rpx;
	}
	
	.search-after-box {
		width: 700rpx;
		height: 64rpx;
		background-color: #f4f4f4;
		display: flex;
		flex-direction: column;
		justify-content: center;
		border-radius: 32rpx;
	}
	
	.search-after-box input {
		color: #333333;
		font-size: 30rpx;
		margin-left: 30rpx;
	}
	
	.list-box {
		width: 750rpx;
		margin-bottom: 100rpx;
	}
	
	.list-item {
		width: 100%;
		height: 128rpx;
		display: flex;
		flex-direction: row;
	}
	
	.item-select {
		width: 104rpx;
	}
	
	.select-box {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.select-box image {
		width: 48rpx;
		height: 48rpx;
	}
	
	.item-info {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-bottom: 2rpx solid #f5f5f5;
	}
	
	.info-avatar image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 10rpx;
	}
	
	.info-name {
		color: #333333;
		font-size: 34rpx;
		margin-left: 40rpx;
		margin-bottom: 6rpx;
	}
	
	.submit-box {
		width: 750rpx;
		height: 100rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 0;
	}
	
	.submit-info {
		width: 670rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	
	.submit-num {
		color: #45d6b7;
		font-size: 30rpx;
	}
	
	.submit-btn {
		width: 114rpx;
		height: 64rpx;
		background-color: #45d6b7;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #ffffff;
		font-size: 30rpx;
	}
	
	.mask {
		width: 750rpx;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
		background-color: #000000;
		opacity: 0.5;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.mask-box {
		width: 750rpx;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.mask-content-box {
		width: 626rpx;
		height: 320rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 20rpx;
	}
	
	.mask-content-title {
		color: #333333;
		font-size: 36rpx;
		margin-top: 96rpx;
		border-radius: 20rpx;
	}
	
	.mask-btn-box {
		margin-top: 82rpx;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		border-top: 2rpx solid #f5f5f5;
	}
	
	.mask-btn {
		width: 100%;
		height: 92rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.btn-cancel {
		border-right: 2rpx solid #f5f5f5;
	}
</style>
